<template>
  <div class="content" ref="content">
    <!-- 战旗格子及 UI 按钮 -->
    <div id="parallax">
      <div class="layer" data-depth-x="-0.08" data-depth-y="-0.04">
        <!-- 游戏操作区域 -->
        <game-table />
      </div>
    </div>

    <!-- 场景按钮区域 -->
    <scene-button @finalAllocation="finalAllocation" :material="material"/>

    <!-- 3D 模型背景 -->
    <three-scene/>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import Parallax from 'parallax-js';

import gameTable from './game_table.vue'
import sceneButton from './scene_button.vue'
import threeScene from './three_scene.vue'

/**
 * 获取 DOM 节点
 */
var content = ref(null);
const props = defineProps({ // eslint-disable-line no-unused-vars
  material: Number
})
const emit = defineEmits(['finalAllocation'])

/**
 * onMounted 钩子函数
 */
onMounted(() => {
  // 初始化 content 高度
  let w_height = window.innerHeight < 720 ? 720 : window.innerHeight; // 响应式获取高度
  content.value.style.height = w_height - 80 + "px";

  // 视差插件相关
  let dom_parallax = document.getElementById('parallax');
  let parallax = new Parallax(dom_parallax);
  parallax;
})

/**
 * scene_button 子组件发来的事件
 */
const finalAllocation = (count, bool) => { // eslint-disable-line no-unused-vars
  emit('finalAllocation', count, bool);
}
</script>

<style scoped>
  .content {
    width: 100%;
    position: relative;
    display: grid;
    justify-content: center;
    align-content: center;
    perspective: 1000px; /* 设置透视距离 */
  }

  #parallax {
    position: relative;
    z-index: 5;
  }

  .layer {
    pointer-events: auto;
  }
</style>